<template>
  <div class="setPassword">
    <div class="top">
      <van-icon @click="$router.back()" name="arrow-left" />
      <p>设置密码</p>
    </div>
    <div class="form">
      <form>
        <div class="form_item" :class="{active:active==1}">
          <input
            v-model="form.mobile"
            type="text"
            placeholder="请输入手机号"
            @blur="active=0"
            @focus="active=1"
          />
          <p v-if="flag" @click="sendCode" style="color:#eb6100;font-size:16px">获取验证码</p>
          <p v-else style="color:#ccc">获取验证码({{timer}})</p>
        </div>
        <div class="form_item" :class="{active:active1==1}">
          <input
            v-model="code"
            @blur="active1=0"
            @focus="active1=1"
            type="text"
            placeholder="请输入短信验证码"
          />
        </div>
        <div class="form_item" :class="{active:active==2}">
          <input
            v-model="form.password"
            @blur="active=0"
            @focus="active=2"
            type="text"
            placeholder="请输入密码"
          />
        </div>
      </form>
      <button @click="login">确定</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { postsmsCode, setPassword } from "../../request/home";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup(props) {
    let {push} = useRouter()
    const data = reactive({
      timer: 60,
      flag: true,
      active: 0,
      active1: 0,
      form: {
        mobile: "",
        sms_type: "login",
        password:''
      },
      code: "",
      type: 2,
      client: 1
    });
    const sendCode = () => {
      let reg = /^(?:(?:\+|00)86)?1\d{10}$/;

      if (!reg.test(data.form.mobile)) {
        Toast.fail("不是正确得手机号");
        return;
      }

      data.flag = false;
      postsmsCode(data.form).then(res => {
        console.log(res);
      });
      let time = setInterval(() => {
        if (data.timer > 0) {
          data.timer--;
        } else {
          data.timer = 60;
          data.flag = true;
          clearInterval(time);
        }
      }, 1000);
    };
    const login = () => {
      setPassword({
        mobile: data.form.mobile,
        password: data.form.password,
        sms_code: data.code
      }).then(res => {
        console.log(res);
        if(res.data.code==200){
            push('/login')
        }
      });
    };
    return { ...toRefs(data), sendCode, login };
  }
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  padding: 20px 10px;
  align-items: center;
  font-size: 26px;
  border-bottom: 1px solid #ccc;
  p {
    width: 90%;
    text-align: center;
  }
}
.form {
  width: 600px;
  margin: auto;
  margin-top: 30px;
  font-size: 22px;
  .form_item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    input {
      border: none;
    }
  }
  .active {
    border-bottom: 1px solid #eb6100;
  }
  p {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 18px;
    margin-bottom: 30px;
  }
  button {
    width: 100%;
    height: 60px;
    color: #fff;
    outline: none;
    border-radius: 40px;
    border: none;
    background-image: url("../../assets/theme-img/login-btn.png");
    background-size: 100% 100%;
  }
}
</style>